<template>
	<div class="weui-panel">
		<div class="weui-cell">
			<input type="button" style="width: 15%;" class="btn returnBtn" @click="goBack" value="返回"></input>
			<strong style="width: 100%;">
				<slot name='text'>员工列表</slot>
			</strong>
			<input type="button" class="btn" style="display: flex;padding: 3px 8px;"  value="新增" @click="addStaff"></input>
		</div>
		<div class="weui-panel__bd">
			<div class="weui-cells">
				<div class="weui-cell  weui-cell_swiped touch" v-for="(item,index) in staffs" >
					<div class="weui-cell__bd " @touchend="touchend($event)" 
					@touchstart="touchstart($event)" >
						<div class="weui-cell " @click="seeDetail(item.account)">
							<div class="weui-cell__bd">
								<p>{{item.name}}</p>
							</div>

						</div>
					</div>
					<div class="weui-cell__ft">
						<a class="weui-swiped-btn weui-swiped-btn_warn" @click="deleteStaff(item.account)">删除</a>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import constant from '@/utils/constant'
	import apis from '@/utils/apis'
	import {
		getAllYsUsers,deleteStaff
	} from '@/apis/tech/tech'
	import {showMsg} from '@/apis/common/common.js'
	export default {
		data() {
			return {
				staffs: [],
				startX: 0, //开始坐标
				startY: 0, //开始纵坐标
			}
		},
		created() {
			this.getStaffList()
		},
		mounted() {
			
		},
		methods: {
			addStaff(){
				this.$router.push({
					name: "techUserInfoPage",
				});
			},	
			seeDetail(account) {
				this.$router.push({
					name: "techUserInfoPage",
					params: {
						"account": account
					}
				});
			},
			deleteStaff(account) {
				deleteStaff(apis.deleteStaff+"?account="+account).then(res =>{
					if (res.resultCode == constant.SUCCESS ) {
						showMsg( this,"删除成功！", null, "success");
						this.getStaffList();
					} else {
						showMsg(this,"删除失败");
					}	
				})
			},
			goBack() {
				this.$router.go(-1);
			},
			getStaffList() {
				this.$showLoading({
					showLoadingToastFlag: true,
				});
				getAllYsUsers(apis.getAllYsUsers).then(res => {
					if (res.resultCode == constant.SUCCESS && res.data != null) {
						this.staffs = res.data;
					}
					this.$hideLoading();
				}).catch(err => {
					this.$hideLoading();
				})
			},
			touchstart(ev) {
				this.startX = ev.targetTouches[0].pageX;
				this.startY = ev.targetTouches[0].pageY;
			},
			touchend(ev) {
				let moveEndX = ev.changedTouches[0].pageX;
				let moveEndY = ev.changedTouches[0].pageY;
				let X = moveEndX - this.startX;
				let Y = moveEndY - this.startY;
				let el = ev.currentTarget;
				if(X < 0 && Math.abs(X)>=80) {
					console.log("right 2 left"+X);
					el.style.transform ="translateX(-100px )";
					el.style.transition="all 0.5s linear";
				}else if(X >0 && Math.abs(X)>=80){
					el.style.transform ="translateX(0px )";
					el.style.transition="all 0.5s linear";
				}
				
			},
		},
	}
</script>

<style>
	@import "../../assets/css/returnBtn.css";
</style>
